<template>
  <header class="CheckboxDetail" tabindex="-1" ref="questionDom">
    <!-- 单选题 -->
    <div class="question-add-body-content-question">
      <div class="question-add-body-content-question-div">
        <span class="question" :style="isQuestionShowStyle">
          <span>问题</span>
          <span class="questionNum">{{ num }}</span>
        </span>
      </div>

      <span
        style="color: red; margin-left: 8.7px"
        class="isRequireAnswer"
        :style="isAnswer"
      >
        *
      </span>
      <el-input
        v-model="mainTitle"
        class="title titleInput"
        :disabled="isDisabled"
        :style="inputStyle"
      ></el-input>
      <el-checkbox-group v-model="checkbox">
        <div class="radio">
          <label
            class="label-radio"
            v-for="(options, index) in radioNum"
            :key="index"
          >
            <el-checkbox :label="options">
              {{ options }}
            </el-checkbox>
          </label>
        </div>
      </el-checkbox-group>
    </div>
  </header>
</template>

<script>
import $ from 'jquery'
export default {
  name: 'CheckboxDetail',

  data() {
    return {
      checkbox: [],
      isAnswer: '', //是否为必答
      inputStyle: '',
    }
  },
  beforeMount() {
    if (this.isRequired === 0) {
      this.isAnswer = 'display:none'
      this.inputStyle = 'margin-left: 20px'
    } else {
      this.isAnswer = 'display:inline'
    }
  },
  props: {
    //问卷题目标题
    mainTitle: {
      type: String,
    },
    //问卷序号
    num: {
      type: Number,
    },
    //问卷的题目数
    radioNum: {
      type: Array,
    },
    //是否能被修改
    isDisabled: {
      type: Boolean,
    },
    //是否显示序号
    isQuestionShowStyle: {
      type: String,
    },

    //是否必答题
    isRequired: {
      type: String,
    },
  },

  methods: {},
}
</script>

<style scoped>
.CheckboxDetail {
  margin-right: 60px;
  margin-bottom: 40px;
  width: 440px;
  height: 297px;
  border: 2px solid lightgrey;
  border-radius: 5px;
  outline: none;
}

/*

 */
.question-add-body-content-question {
  width: 100%;
  height: 100%;
  overflow: auto;
  /* border: 2px solid lightgrey;
  border-radius: 5px; */
  /* display: inline-block; */
  /* line-height: 280px; */
  /* text-align: center; */
  /* margin: autos; */
}
.question-add-body-content-question::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.question-add-body-content-question::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  background: #535353;
}
.question-add-body-content-question::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background: #ededed;
}

.question-add-body-content-question-div {
  width: 405px;
  height: 50px;
  line-height: 50px;
  text-align: left;
  margin: auto;
  /* border: 1px solid; */
  font-size: 18.5px;
  position: relative;
}
.question-add-body-content-question-div .el-icon-remove-outline {
  color: red;
  font-weight: bold;
  position: absolute;
  right: 1px;
  top: 16px;
}
.question-add-body-content-question .title {
  width: 395px;
  /* margin-left: 20px; */
  border: 3px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 3px;
  font-size: 15px;
  font-weight: normal;
}
.question-add-body-content-question .title-tag {
  margin-top: 10px;
  margin-left: 20px;
}
</style>

<style scoped>
.radio {
  display: block;
  width: 395px;
  height: 195px;
  /* border: 1px solid lightgrey; */
  border-radius: 5px;
  outline: none;
  /* box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 3px; */
  margin: auto;
  margin-top: 10px;
  margin-left: 20px;
  line-height: 35.99px;
  position: relative;
}
.label-radio {
  display: inline-block;
  width: 385px;
  height: 35.99px;
  border: 0px;
}

.label-radio {
  font-size: 17px;
  font-weight: normal;
}
</style>
<style>
.radioQuestion .el-radio__inner {
  border: 1px solid grey;
  margin-left: 5px;
}
.radioQuestion .el-tag__close {
  position: absolute;
  right: 10px;
  top: 10px;
}
</style>
